/**
 * Created by yujianfu on 2019/6/3.
 */

/**
 * Created by ziyu on 2017/7/27.
 */
import React, {Component, PropTypes} from 'react'
import {Tag} from 'antd';
import {Card, Col, Row} from 'antd';
import {Button, Icon} from 'antd';
import {Popconfirm, message} from 'antd';
import {fetchPost} from '../../../../utils/request'
import Styles from './Index.less'

const text = 'Are you sure to GO NEXT?';
const ButtonGroup = Button.Group;
const {CheckableTag} = Tag;

class Problem extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      tradeNo: props.tradeNo,
      data: [],
      checkedTags: [],
      changeOrder: null,
      stepType: null,
      worksheetType: props.worksheetType
    }
  }


  componentWillReceiveProps(props) {
    this.setState({
      ...this.state,
      changeOrder: null,
      data: [],
      checkedTags: [],
      tradeNo: props.tradeNo,
      stepType: props.stepType
    }, () => {
      // console.log(999, this.state);
      this.getData();
    });
  }

  handleChange(e, k, res) {
    var checkedTags = this.state.checkedTags;
    var newCheckedTags = [];
    var ct = {key: k, answer: res};
    if (checkedTags.length == 0) {
      newCheckedTags.push(ct);
    } else {
      var existTag = null;
      checkedTags.map(t => {
        if (t.key != k) {
          newCheckedTags.push(t);
        } else {
          existTag = t;
        }
      });
      if (existTag == null)
        newCheckedTags.push(ct);
      else {
        console.log(existTag, res);
        if (existTag.res != res)
          newCheckedTags.push(ct);
      }
    }

    this.setState({
      ...this.state,
      checkedTags: newCheckedTags
    });
  };

  getCheckedStatus(key, res) {
    let checkedTags = this.state.checkedTags;
    var isChecked = false;
    checkedTags.map(tag => {
      if (tag.key == key && tag.answer == res) {
        isChecked = true;
      }
    });
    return isChecked;
  }

  getData() {
    fetchPost(`/audit/question/${this.state.tradeNo}/${this.state.stepType}/list`, {}).then(res => {
      if (res.code !== 0 || res.data == null) {
        return;
      }
      this.setState({
        data: res.data.list
      }, () => {
        // console.info('tradeNo:' + this.state.tradeNo, +',auditNodeKey:' + this.state.stepType + ",data:" + JSON.stringify(this.state.data))
      });
    });

  }

  confirm() {
    let self = this;
    fetchPost(`/audit/question/${this.state.tradeNo}/${this.state.stepType}/answer`, {
      questions: this.state.checkedTags,
      worksheetType: this.state.worksheetType,
      tradeNo: this.state.tradeNo
    }).then(res => {
      if (res.code !== 0 || res.msg == null) {
        return;
      }
      let data = res.msg;
      if (data == "Pass" && self.state.stepType == "photoCheckNew")
        self.props.goNextStep(self.state.tradeNo, "end");
      else
        self.props.goNextStep(self.state.tradeNo, "end");
    });
  }

  isNextAvailable() {
    return this.state.data.length == this.state.checkedTags.length;
  }

  getQuestionList(item) {
    let card = null;
    card = item.key == 'WORKLEVEL' ?
      <div>
        <Card style={{'margin-bottom': '10px'}}>
          <span style={{width: '100%', 'font-size': '14px'}}>{item.name}</span>
          <span>{item.answer == "" ? "" : "(" + item.answer + ")"}</span>
          <br/>
          <br/>
          <CheckableTag style={{'border': '1px solid silver', 'margin-bottom': '5px'}} {...this.props}
                        checked={this.getCheckedStatus(item.key, 'Level 1')}
                        onChange={(e) => this.handleChange(e, item.key, 'Level 1')}
                        key={item.key + ':Level 1'}>
            <span style={{"font-size": '14px'}}>Level 1</span>
          </CheckableTag>
          <CheckableTag style={{'border': '1px solid silver', 'margin-bottom': '5px'}} {...this.props}
                        checked={this.getCheckedStatus(item.key, 'Level 2')}
                        onChange={(e) => this.handleChange(e, item.key, 'Level 2')}
                        key={item.key + ':Level 2'}>
            <span style={{"font-size": '14px'}}>Level 2</span>
          </CheckableTag>
          <CheckableTag style={{'border': '1px solid silver', 'margin-bottom': '5px'}} {...this.props}
                        checked={this.getCheckedStatus(item.key, 'Level 3')}
                        onChange={(e) => this.handleChange(e, item.key, 'Level 3')}
                        key={item.key + ':Level 3'}>
            <span style={{"font-size": '14px'}}>Level 3</span>
          </CheckableTag>
          <CheckableTag style={{'border': '1px solid silver', 'margin-bottom': '5px'}} {...this.props}
                        checked={this.getCheckedStatus(item.key, 'Level 4')}
                        onChange={(e) => this.handleChange(e, item.key, 'Level 4')}
                        key={item.key + ':Level 4'}>
            <span style={{"font-size": '14px'}}>Level 4</span>
          </CheckableTag>
          <CheckableTag style={{'border': '1px solid silver', 'margin-bottom': '5px'}} {...this.props}
                        checked={this.getCheckedStatus(item.key, 'Sensitive occupation')}
                        onChange={(e) => this.handleChange(e, item.key, 'Sensitive occupation')}
                        key={item.key + ':Sensitive occupation'}>
            <span style={{"font-size": '14px'}}>Sensitive occupation</span>
          </CheckableTag>
          <CheckableTag style={{'border': '1px solid silver', 'margin-bottom': '5px'}} {...this.props}
                        checked={this.getCheckedStatus(item.key, 'Others')}
                        onChange={(e) => this.handleChange(e, item.key, 'Others')}
                        key={item.key + ':Others'}>
            <span style={{"font-size": '14px'}}>Others</span>
          </CheckableTag>
          <div className={Styles.problemDesc}>
            <ul className={Styles.ulSty}>
              <li className={Styles.liSty}>Level 1: supervisor, manager, hr, finance, owner, partner
              </li>
              <li className={Styles.liSty}>Level 2: worker, service, maintenance
              </li>
              <li className={Styles.liSty}>Level 3: driver, Courier
              </li>
              <li className={Styles.liSty}>Level 4: cleaning, handyman
              </li>
              <li className={Styles.liSty}>Sensitive occupation: police officers, lawyers, soldiers
              </li>
            </ul>
          </div>
        </Card>
      </div>
      :
      <Card style={{'margin-bottom': '10px'}}>
        <span style={{width: '100%', "font-size": "14px"}}>{item.name}</span>
        <span>{item.answer == "" ? "" : "(" + item.answer + ")"}</span>
        <br/>
        <br/>
        <CheckableTag style={{"border": "1px solid silver"}} {...this.props}
                      checked={this.getCheckedStatus(item.key, "yes")}
                      onChange={(e) => this.handleChange(e, item.key, "yes")}
                      key={item.key + ":yes"}>
          <span style={{"font-size": "14px"}}>Yes</span>
        </CheckableTag>
        <CheckableTag style={{"border": "1px solid silver"}} {...this.props}
                      checked={this.getCheckedStatus(item.key, "no")}
                      onChange={(e) => this.handleChange(e, item.key, "no")}
                      key={item.key + ":no"}>
          <span style={{"font-size": "14px"}}>NO</span>
        </CheckableTag>
      </Card>
    return card
  }

  render() {
    return (
      <div>
        {
          this.state.data.map(item =>
            this.getQuestionList(item)
          )
        }

        {
          this.isNextAvailable() ?
            <Card title="Confirm" bordered={true} key="over-first">
              <Popconfirm placement="topLeft" title={text} onConfirm={(e) => this.confirm(e)} okText="Yes"
                          cancelText="No">
                <Button type="primary">
                  GO NEXT
                  <Icon type="right"/>
                </Button>
              </Popconfirm>
            </Card>
            : ""
        }

      </div>
    )

  }
}

export default Problem
